<template>
    <div>
        <div class="card-header">{{title}}</div>
        <div class="card-body">
            <div class="form-group">
                <input type="text" class="form-control" ref="put_id" placeholder="Id"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" ref="put_title" placeholder="Title"/>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" ref="put_description" placeholder="Description"/>
            </div>
            <div class="form-check mb-2">
                <input type="checkbox" class="form-check-input" ref="put_published"/>
                <label class="form-check-label" for="put_published">Publish</label>
            </div>
            <button class="btn btn-sm btn-primary" @click="putData">Update Data</button>
            <button class="btn btn-sm btn-warning ml-2" @click="clearPutOutput">Clear</button>
            <div v-if="putResult" class="alert alert-secondary mt-2" role="alert">
                <pre>{{putResult}}</pre>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from "vue-property-decorator";
import http from "../http-common";

@Component({})
export default class AxiosPutJSONData extends Vue {
    @Prop() private name!: string;
    private title: string = "Vue Axios PUT - BezKoder.com";
    private putResult:any = "";

    $refs!:{
        put_id:HTMLInputElement,
        put_title:HTMLInputElement,
        put_description:HTMLInputElement,
        put_published:HTMLInputElement
    }

    public clearPutOutput():void{
        this.$refs.put_id.value = "";
        this.$refs.put_description.value = "";
        this.$refs.put_title.value = "";
        this.$refs.put_published.checked = false;
        this.putResult = "";
    }
    public putData():void{
        let jsonData = {
            id:this.$refs.put_id.value,
            title:this.$refs.put_title.value,
            description:this.$refs.put_description.value,
            published:this.$refs.put_published.checked,
        }
        http.put("/api/tutorial",jsonData).then(res =>{
            console.log(res);
        })
        console.log(jsonData);
    }
}
</script>

<style scoped>

</style>
